<template>
  <div class="List-wrap">
        <div class="top">
            <van-nav-bar title="秒抢" left-text="返回" left-arrow>
            <van-icon name="search" slot="right" />
            </van-nav-bar>
        </div>
        <div class="nav">
            <van-grid clickable :column-num="5" :border="false">
                  <van-grid-item
                    icon="home-o"
                    text="路由跳转"
                    to="/"
                  />
                  <van-grid-item
                    icon="search"
                    text="URL 跳转"
                    url="https://www.baidu.com"
                  />
                  <van-grid-item
                    icon="search"
                    text="URL 跳转"
                    url="https://www.baidu.com"
                  />
                  <van-grid-item
                    icon="search"
                    text="URL 跳转"
                    url="https://www.baidu.com"
                  />
                  <van-grid-item
                    icon="search"
                    text="URL 跳转"
                    url="https://www.baidu.com"
                  />
          </van-grid>
      </div>
      <div class="notice">
          <van-notice-bar
              text="上线了上线了上线了上线了上线了上线了上线了上线了上线了！！！"
              left-icon="volume-o"
          />
      </div>
     <div>
        <van-tabs v-model="active">

                <van-tab title="标签 1">
                   <div class="goods_list">
                       <div class="left">
                           <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775749&di=a904eaa2237734e587484b946055eab7&imgtype=0&src=http%3A%2F%2Fimg011.hc360.cn%2Fg2%2FM06%2F45%2FBF%2FwKhQuFLfLl-EakIIAAAAAGqrml0128.jpg"/>
                       </div>
                       <div class="right">
                          <div class="head"><b>好吃的草莓美味的好吃牌子</b></div>
                          <div class="price_area">
                                  <div class="area_left">
                                 <span class="now_price">&yen;248</span><br/>
                                 <span class="old_price">&yen;288</span>
                                 </div>
                                 <div class="area_right">
                                    <van-button type="warning" class="buy">立即抢购</van-button>
                                    <van-progress :percentage="25" class="process" pivot-text="已抢25%" color="#f44"/> 
                                 </div>
                          </div>
                       </div>
                   </div>
                   <div class="goods_list">
                       <div class="left">
                           <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775749&di=a904eaa2237734e587484b946055eab7&imgtype=0&src=http%3A%2F%2Fimg011.hc360.cn%2Fg2%2FM06%2F45%2FBF%2FwKhQuFLfLl-EakIIAAAAAGqrml0128.jpg"/>
                       </div>
                       <div class="right">
                          <div class="head"><b>好吃的草莓美味的好吃牌子11</b></div>
                          <div class="price_area">
                                  <div class="area_left">
                                 <span class="now_price">&yen;248</span><br/>
                                 <span class="old_price">&yen;288</span>
                                 </div>
                                 <div class="area_right">
                                    <van-button type="warning" class="buy">立即抢购</van-button>
                                    <van-progress :percentage="25" class="process" pivot-text="已抢25%" color="#f44"/> 
                                 </div>
                          </div>
                       </div>
                   </div>
                   <div class="goods_list">
                       <div class="left">
                           <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775749&di=a904eaa2237734e587484b946055eab7&imgtype=0&src=http%3A%2F%2Fimg011.hc360.cn%2Fg2%2FM06%2F45%2FBF%2FwKhQuFLfLl-EakIIAAAAAGqrml0128.jpg"/>
                       </div>
                       <div class="right">
                          <div class="head"><b>好吃的草莓美味的好吃牌子22</b></div>
                          <div class="price_area">
                                  <div class="area_left">
                                 <span class="now_price">&yen;248</span><br/>
                                 <span class="old_price">&yen;288</span>
                                 </div>
                                 <div class="area_right">
                                    <van-button type="warning" class="buy">立即抢购</van-button>
                                    <van-progress :percentage="25" class="process" pivot-text="已抢25%" color="#f44"/> 
                                 </div>
                          </div>
                       </div>
                   </div>

             <!----<c-good-item :goods="goods_one"></c-good-item>-->
                </van-tab>
                <van-tab title="标签 2">
                  <c-good-item :goods="goods_two"></c-good-item>
                </van-tab>
                <van-tab title="标签 3">
                   <c-good-item :goods="goods_three"></c-good-item>
               </van-tab>
                <van-tab title="标签 4">
                   <c-good-item :goods="goods_four"></c-good-item>
               </van-tab>
               <van-tab title="标签 5">
                   <c-good-item :goods="goods_five"></c-good-item>
               </van-tab>
               <van-tab title="标签 6">
                   <c-good-item :goods="goods_six"></c-good-item>
               </van-tab>
        </van-tabs>         
     </div>
     <copyright />
     <c-footer></c-footer>
  </div>
</template>

<script>
import copyright from '@/components/copyright';

export default {
      name: 'List',
      data() {
          return {
                goods_one: [
                {title:'商品',money:"9.00",image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775749&di=a904eaa2237734e587484b946055eab7&imgtype=0&src=http%3A%2F%2Fimg011.hc360.cn%2Fg2%2FM06%2F45%2FBF%2FwKhQuFLfLl-EakIIAAAAAGqrml0128.jpg'},
                {title:'商品',money:"900",image: '//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/78057/27/6795/83358/5d4e1692E371acce8/412a00ff8964efcd.jpg'},
                {title:'商品',money:"800",image: '//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/78057/27/6795/83358/5d4e1692E371acce8/412a00ff8964efcd.jpg'},
                {title:'商品',money:"2.00",image: '//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/78057/27/6795/83358/5d4e1692E371acce8/412a00ff8964efcd.jpg'},
                {title:'商品',money:"3.00",image: '//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/78057/27/6795/83358/5d4e1692E371acce8/412a00ff8964efcd.jpg'},
              ],
              goods_two: [
                {title:'商品',money:"9.00",image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775749&di=a904eaa2237734e587484b946055eab7&imgtype=0&src=http%3A%2F%2Fimg011.hc360.cn%2Fg2%2FM06%2F45%2FBF%2FwKhQuFLfLl-EakIIAAAAAGqrml0128.jpg'},
                {title:'商品',money:"900",image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775748&di=15cd768b6e6a1a40092429c7b2e61d89&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM05%2F3C%2FD7%2FwKhQs1NnB6iETzrKAAAAAMp-1Is503.jpg'},
                {title:'商品',money:"800",image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775748&di=15cd768b6e6a1a40092429c7b2e61d89&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM05%2F3C%2FD7%2FwKhQs1NnB6iETzrKAAAAAMp-1Is503.jpg'},
                {title:'商品',money:"2.00",image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775748&di=15cd768b6e6a1a40092429c7b2e61d89&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM05%2F3C%2FD7%2FwKhQs1NnB6iETzrKAAAAAMp-1Is503.jpg'},
                {title:'商品',money:"3.00",image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565695775748&di=15cd768b6e6a1a40092429c7b2e61d89&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM05%2F3C%2FD7%2FwKhQs1NnB6iETzrKAAAAAMp-1Is503.jpg'},
              ],
          }
     },
     components:{
        copyright
     }
}
</script>
<style scoped>
    .List-wrap{padding:0 0 50px}
    .nav{margin-top:10px;border-radius:10px;background:#ffffff;}
    .nav_list1{border-radius:30px}
    .notice{margin-top:10px;}    
    .goods_list{width:100%;height:150px;border-bottom:1px solid #ccc}
    .left{width:40%;height:150px;float:left}
    .left img{width:80%;padding:10% 10%;height:120px;}
    .right{height:150px;width:60%;float:left}
    .right .head{height:26px;width:100%;margin-top:2px;line-height:26px;margin-bottom:50px}
    .now_price{color:red;font-size:1.5rem}
    .old_price{text-decoration:line-through;color:#666666}
    .area_left{float:left;width:54%;}
    .area_right{float:left;width:46%;height:70px}
    .buy{border-radius:20px;width:100%;height:34px;line-height:34px;background:#EB4241}
    .process{height:12px;width:100%;border-radius:8px;margin-top:12px}
</style>
